.commoditydetails{
	height: 100vh;
	.header-top,.header-line,.header-zhong,.box{
		background-color: #0EA970;
		width: 100%;
	}
	.header-line{
		
		position: relative;
		line-height: 32px;
		color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: center; 
		align-items: center; 
		 
		.left{
			position: absolute;
			left: 2%;
		}
		
		
	}
	.commoditydetails_box{
		height: 120%;
		position: relative;
		background: #F3F3F3;
		.commoditydetails_box_dibu{
			    height: 200rpx;
			    background: #0EA970;
			    border-radius: 0 0 13% 13%;
		}
		.commoditydetails_box_shang{
			width: 100%;
			height: 100%;
			    position: absolute;
			    top: 0;
			    left: 0;
			.commoditydetails_box_shang_lunbo{
				position: relative;
				margin-bottom: 25rpx;
				.swiper{
					width:710rpx;
					height: 420rpx;
					border-radius: 25rpx;
					overflow: hidden;
					/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
					transform: translateY(0);
					margin: 0 auto;
					.swiper-item{
						image{
							width:710rpx;
							height: 420rpx;
							border-radius: 25rpx;
						}
					}
					
				}
				.current{
					    position: absolute;
					    top: 86%;
					    right: 6%;
					    width: 102rpx;
					    height: 40rpx;
					    background: rgba(0,0,0,0.5000);
					    border-radius: 20rpx 20rpx 20rpx 20rpx;
						text-align: center;
						line-height: 40rpx;
						color: #ffffff;
						font-size: 24rpx;
				}
			}
			.commoditydetails_box_shang_a{
				width: 710rpx;
				height: 158rpx;
				background: #FFFFFF;
				margin: 0 auto;
				border-radius: 25rpx;
				margin-bottom: 20rpx;
				.top{
					display: flex;
					    align-items: center;
					.text1{
						font-size: 32rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #3D3D3D;
						padding: 26rpx 30rpx;
					}.text2{
						width: 124rpx;
						height: 30rpx;
						background: rgba(255,143,31,0.2000);
						border-radius: 16rpx 16rpx 16rpx 0px;
						display: block;
						color: #FF8F1F;
						font-size: 20rpx;
						text-align: center;
						line-height: 30rpx;
					}
				}
				.bottom{
					.text3{
						font-weight: 500;
						color: #FF8F1F;
						font-size: 24rpx;
						padding: 0 30rpx;
						.text4{
							font-size:34rpx ;
							font-weight: 500;
						}
					}
					.text5{
						font-size: 24rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						text-decoration:line-through
					}
				}
			}
			.commoditydetails_box_bottom{
				margin-bottom: 20rpx;
				.commoditydetails_box_bottom_box{
					height: 100%;
					    width: 710rpx;
					    background: #FFFFFF;
					    border-radius: 25rpx;
						margin: 0 auto;
					.commoditydetails_box_bottom_a{
						padding: 0rpx 20rpx;
						    
							.commoditydetails_box_bottom_a_a{
								display: flex;
								justify-content: space-between;
								align-items: center;
								border-bottom: 1px solid #f6f6f6;
								padding: 20rpx 0rpx;
								.text1{
									font-size: 28rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 400;
									color: #333333;
								}
								.text2{
									font-size: 24rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 400;
									color: #666666;
								}
								.text{
									color: #FF0000;
								}
								.sb{
									font-size: 24rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 400;
									color: #666666;
								}
							}
							.canshu{
								font-size: 28rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #333333;
								text-align: center;
								padding: 30rpx 0;
							}
					}
				}
				
			}
			// .van-popup{
			// 	.popup_box{
			// 		    width: 92%;
			// 		    // height: 100%;
			// 		    padding: 0 30rpx;
			// 			position: relative;
			// 			padding-top: 10rpx;
			// 			.icon{
			// 				position: absolute;
			// 				    top: 20rpx;
			// 				    right: 20rpx;
			// 			}
			// 		.popup_box_tian{
			// 			width: 100%;
			// 			    padding-bottom: 30rpx;
			// 			    border-bottom: 2rpx solid #DCDCDC;
			// 				// padding-top: 14rpx;
			// 			.popup_box_a{
			// 				.img{
			// 					width: 168rpx;
			// 					height: 112rpx;
			// 					border-radius: 12rpx 12rpx 12rpx 12rpx;
			// 				}
			// 				.text1{
			// 					font-size: 24rpx;
			// 					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			// 					font-weight: 400;
			// 					color: #FF8F1F;
			// 					padding: 0 10rpx;
			// 					.text2{
			// 						font-size: 32rpx;
			// 						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			// 						font-weight: 400;
			// 						color: #FF8F1F;
			// 					}
			// 				}
			// 			}
						
			// 		}
			// 		.popup_box_b{
			// 			padding-bottom: 40rpx;
			// 			    border-bottom: 2rpx solid #DCDCDC;
			// 			.popup_box_b_top{
			// 				font-size: 24rpx;
			// 				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			// 				font-weight: 400;
			// 				color: #333333;
			// 				padding: 30rpx 0;
			// 			}
			// 			.popup_box_b_bottom{
			// 				display: flex;
			// 				    justify-content: space-between;
			// 				    align-items: center;
			// 				.left{
			// 					display: flex;
			// 					.left_a{
			// 						width: 158rpx;
			// 						height: 174rpx;
			// 						background: #FFFFFF;
			// 						border-radius: 12rpx 12rpx 12rpx 12rpx;
			// 						text-align: center;
			// 						box-shadow: 0px 1px 12px 0px rgba(0,0,0,0.0800);
			// 						margin-right: 20rpx;
			// 						.img{
			// 							width: 150rpx;
			// 							height: 124rpx;
			// 						}
			// 						.view{
			// 							font-size: 24rpx;
			// 							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			// 							font-weight: 400;
			// 							color: #333333;
			// 						}
			// 					}
			// 					.active{
			// 						border: 2rpx solid #FF8F1F;
									
			// 						.view{
			// 							color: #FF8F1F;
			// 						}
			// 					}
								
			// 				}
							
			// 			}
			// 		}
			// 		.popup_box_b_a{
			// 			padding-bottom: 40rpx;
			// 			    border-bottom: 2rpx solid #DCDCDC;
			// 			.popup_box_b_top{
			// 				font-size: 24rpx;
			// 				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			// 				font-weight: 400;
			// 				color: #333333;
			// 				padding: 30rpx 0;
							
			// 			}
			// 			.popup_box_b_bottom{
			// 				display: flex;
			// 				    align-items: center;
			// 				.text{
			// 					width: 86rpx;
			// 					height: 44rpx;
			// 					background: #D9D9D9;
			// 					display: block;
			// 					border-radius: 5rpx;
			// 					font-size: 24rpx;
			// 					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			// 					font-weight: 500;
			// 					color: #FFFFFF;
			// 					text-align: center;
			// 					line-height: 44rpx;
			// 					margin-right: 30rpx;
			// 				}
			// 				.items{
			// 					background: #FFFFFF;
			// 					color: #FF8F1F;
			// 					border:2rpx solid #FF8F1F;
			// 				}
			// 			}
			// 		}
			// 		.goumai{
			// 			    display: flex;
			// 			    justify-content: space-between;
			// 			    align-items: center;
			// 				padding: 30rpx 0;
			// 			.goumai_left{
			// 				.text1{
			// 					font-size: 32rpx;
			// 					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			// 					font-weight: 400;
			// 					color: #333333;
			// 				}
			// 				.text2{
			// 					font-size: 24rpx;
			// 					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			// 					font-weight: 400;
			// 					color: #D9D9D9;
			// 				}
			// 			}
			// 			.goumai_right{
			// 				width: 136rpx;
			// 				height: 44rpx;
			// 				background: rgba(217,217,217,0.4000);
			// 				border-radius: 24rpx 24rpx 24rpx 24rpx;
			// 				display: flex;
			// 				    justify-content: space-around;
			// 				    // align-items: center;
			// 					line-height: 41rpx;
			// 					color: #A8A8A8;
			// 				.text3{
			// 					    font-size: 44rpx;
			// 				}
			// 				.text4{
			// 					    font-size: 30rpx;
			// 				}
			// 				.text5{
			// 					    font-size: 44rpx;
			// 				}
			// 			}
			// 		}
					
			// 	}
			// 	.bottoms{
			// 		// position: absolute;
			// 		//     bottom: 0;
			// 		//     left: 0;
			// 		width: 100%;
			// 		height: 98rpx;
			// 		background: #FFFFFF;
			// 		box-shadow: 0px -8rpx 20rpx 0px rgba(0,0,0,0.1000);
			// 		display: flex;
			// 		justify-content: space-between;
			// 		    align-items: center;
			// 			margin-top: 100rpx;
			// 		.bottom_left{
			// 			text-align: center;
			// 			margin-left: 60rpx;
			// 			image{
			// 				width: 48rpx;
			// 				height: 48rpx;
			// 			}
			// 			text{
			// 				display: grid;
			// 				font-size: 20rpx;
			// 				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			// 				font-weight: 400;
			// 				color: #9E9E9E;
			// 			}
			// 		}
			// 		.bottom_right{
			// 			width: 314rpx;
			// 			height: 60rpx;
			// 			background: linear-gradient(180deg, #00DF25 0%, #0EA970 100%);
			// 			border-radius: 30rpx 30rpx 30rpx 30rpx;
			// 			text-align: center;
			// 			line-height :60rpx;
			// 			color: #FFFFFF;
			// 			font-size: 32rpx;
			// 			margin-right: 60rpx;
			// 		}
			// 	}
			// }
			.bottoms{
				position: fixed;
				    bottom: 0;
				    left: 0;
				width: 100%;
				height: 98rpx;
				background: #FFFFFF;
				box-shadow: 0px -8rpx 20rpx 0px rgba(0,0,0,0.1000);
				display: flex;
				justify-content: space-between;
				    align-items: center;
				.bottom_left{
					text-align: center;
					margin-left: 60rpx;
					image{
						width: 48rpx;
						height: 48rpx;
					}
					text{
						display: grid;
						font-size: 20rpx;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #9E9E9E;
					}
				}
				.gouwuche{
					width: 200rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #FF9125 0%, #FDBE5F 98%);
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					opacity: 1;
					text-align: center;
					line-height :60rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					margin-left: 120rpx;
				}
				.bottom_right{
					width: 200rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #00DF25 0%, #0EA970 100%);
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					text-align: center;
					line-height :60rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					margin-right: 40rpx;
				}
			}
		}
		
	}
}